<template>
  <div class="header">
    <div class="header-container">
      <!-- Logo和网站名称 -->
      <div class="logo" @click="goToHome">
        <i class="el-icon-food" style="font-size: 24px; color: #409EFF; margin-right: 10px;"></i>
        <span class="site-name">校园外卖平台</span>
      </div>
      
      <!-- 导航菜单 -->
      <div class="nav-menu">
        <el-menu mode="horizontal" :default-active="activeIndex" router>
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item v-if="isLoggedIn && currentUser && currentUser.role == 1" index="/merchants">商家列表</el-menu-item>
          <!-- 尚未实现的组件，先注释起来 -->
          <el-menu-item index="/orders" v-if="isLoggedIn && currentUser && currentUser.role == 1">我的订单</el-menu-item>
        </el-menu>
      </div>
      
      <!-- 用户区域 -->
      <div class="user-area">
        <!-- 购物车图标 -->
        <div class="cart-icon" v-if="isLoggedIn" @click="goToCart">
          <el-badge :value="cartItemCount" :max="99" class="cart-badge">
            <i class="el-icon-shopping-cart-full"></i>
          </el-badge>
        </div>
        
        <!-- 未登录状态显示登录和注册按钮 -->
        <template v-if="!isLoggedIn">
          <el-button type="text" @click="goToLogin">登录</el-button>
          <el-button type="text" @click="goToRegister">注册</el-button>
        </template>
        
        <!-- 已登录状态显示用户下拉菜单 -->
        <el-dropdown v-else @command="handleCommand">
          <span class="el-dropdown-link">
            <el-avatar :size="32" :src="userAvatar" v-if="userAvatar"></el-avatar>
            <span class="username">{{ userName }}</span>
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <!-- 尚未实现的组件，先注释起来 -->
            <el-dropdown-item command="userCenter">个人中心</el-dropdown-item>
            <!-- <el-dropdown-item command="userInfo">用户信息</el-dropdown-item> -->
            <el-dropdown-item v-if="currentUser && currentUser.role == 1" command="userAddress">我的地址</el-dropdown-item>
            <el-dropdown-item v-if="currentUser && currentUser.role == 1" command="userOrder">我的订单</el-dropdown-item>
            <!-- 商家用户显示商家中心入口 -->
            <el-dropdown-item command="merchantCenter" v-if="isMerchant">商家中心</el-dropdown-item>
            <el-dropdown-item command="applyMerchant" v-if="isLoggedIn && !isMerchant">申请成为商家</el-dropdown-item>
            <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Header',
  data() {
    return {
      activeIndex: '/' // 默认激活首页
    }
  },
  computed: {
    ...mapGetters(['isLoggedIn', 'currentUser', 'userRole', 'cartItemCount']),
    // 用户名
    userName() {
      return this.currentUser ? this.currentUser.username : ''
    },
    // 用户头像
    userAvatar() {
      return this.currentUser && this.currentUser.avatar ? this.currentUser.avatar : ''
    },
    // 是否是商家
    isMerchant() {
      return this.isLoggedIn && this.userRole === 2
    }
  },
  created() {
    // 根据当前路由设置激活的导航项
    this.activeIndex = this.$route.path
  },
  methods: {
    // 跳转到首页
    goToHome() {
      this.$router.push('/')
    },
    // 跳转到登录页
    goToLogin() {
      this.$router.push('/login')
    },
    // 跳转到注册页
    goToRegister() {
      this.$router.push('/register')
    },
    // 跳转到购物车
    goToCart() {
      this.$router.push('/cart')
    },
    // 处理下拉菜单命令
    handleCommand(command) {
      switch (command) {
        // 尚未实现的组件，先注释起来
        case 'userCenter':
          this.$router.push('/user/info')
          break
        case 'userInfo':
          this.$router.push('/user/info')
          break
        case 'userAddress':
          this.$router.push('/user/address')
          break
        case 'userOrder':
          this.$router.push('/user/orders')
          break
        case 'merchantCenter':
          this.$router.push('/merchant')
          break
        case 'applyMerchant':
          this.$router.push('/merchant/apply')
          break
        case 'logout':
          this.logout()
          break
        default:
          this.$message.info('该功能尚未实现')
          break
      }
    },
    // 退出登录
    logout() {
      this.$store.commit('CLEAR_USER_INFO')
      this.$message.success('退出登录成功')
      // 跳转到首页
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>
.header {
  /* position: fixed; */
  top: 0;
  left: 0;
  width: 100%;
  /* z-index: 1000; */
  height: 60px;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;
}

.logo {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.logo img {
  width: 36px;
  height: 36px;
  margin-right: 10px;
}

.site-name {
  font-size: 20px;
  font-weight: bold;
  color: #409EFF;
}

.nav-menu {
  flex: 1;
  margin: 0 20px;
}

.user-area {
  display: flex;
  align-items: center;
}

.cart-icon {
  margin-right: 20px;
  cursor: pointer;
  font-size: 24px;
}

.cart-badge :deep(.el-badge__content) {
  top: 0;
  right: -10px;
}

.username {
  margin: 0 5px;
}

.el-dropdown-link {
  display: flex;
  align-items: center;
  cursor: pointer;
}
</style> 